<script setup lang="ts">
import {SupervisionDataDto} from "@/ts/entityTypes.ts";
import {ref, onMounted, reactive, ComputedRef, computed} from "vue";
import {assignInspectorApi, getInspectorListApi, getSupervisionDataByIdApi} from "@/api/supervisionDataApi.ts";
import {ElMessage} from "element-plus";
import {codeToText, provinceAndCityData} from "element-china-area-data";

let {supervisorId, isAssigned} = defineProps({
  supervisorId: {
    type: String,
    required: true,
    default: ''
  },
  isAssigned: {
    type: Number,
    required: true,
    default: 1
  }
})
let description = ref<SupervisionDataDto>()
const assignedPerson = ref('')
const isOffAssign = ref(false)
let assignedPersonList = reactive<Array<any>>([])

const emits = defineEmits(
    ["cancelPreview",
      "getAddress"]
)
const cancel = ()=>{
  emits('cancelPreview', true)
}



let address = reactive<{
  province: string
  city: string
}>({
  province: '',
  city: ''
})

interface AreaList {
  value: string
  label: string
}

const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => {
  if (!address.province) { return [] }
  let temp = provinceAndCityData.find((item: any) => {
    return item.value == address.province
  })
  return temp?.children ? temp.children : []
})


const handleProvinceSelect = () => {
  address.city = ''
  emits('getAddress', {
    code: [address.province], //区域码
    name: [codeToText[address.province]], //汉字
    isComplete: false
  })
}

const switchChange = (val: boolean) => {
  address.province = <string>description.value?.address.province
  address.city = <string>description.value?.address.city
}

const getInspectorList = async () => {
  assignedPersonList.splice(0, assignedPersonList.length)
  let res = await getInspectorListApi({province: address.province, city: address.city})
      .catch(err => {
        ElMessage.error(err)
      })
  if (res?.data.code == 200){
    assignedPersonList.push(...res.data.data)
  } else {
    ElMessage.error('获取数据失败')
  }
}

const assignInspector = async () =>{
  if(assignedPerson.value == '' || !description.value){
    ElMessage.warning('请选择指派人员')
    return
  } else {
    let res = await assignInspectorApi(description.value, assignedPerson.value)
        .catch(err => {
          ElMessage.error(err)
        })
    if (res?.data.code == 200){
      ElMessage.success('指派成功')
      cancel()
    } else {
      ElMessage.error(res?.data.msg)
    }

  }
}


const initData = async () => {
  let res = await getSupervisionDataByIdApi(supervisorId)
  if (res?.data.code == 200){
    description.value = res.data.data
  } else {
    ElMessage.error('获取数据失败')
  }
}

const aqiToText = (aqi: number = 0) => {
  switch (aqi) {
    case 1:
      return '优'
    case 2:
      return '良'
    case 3:
      return '轻度污染'
    case 4:
      return '中度污染'
    case 5:
      return '重度污染'
    case 6:
      return '严重污染'
    default:
      return '未知'
  }
}

onMounted(()=>{
  initData()
})

</script>

<template>
  <div class="main-content">
  <el-descriptions
      style="width: 90%"
      title="公众监督数据详情"
      direction="horizontal"
      :column="1"
      border
  >
    <template #extra>
      <el-button type="primary" @click="cancel()">返回</el-button>
    </template>
    <el-descriptions-item label="公众监督反馈信息编号">{{description?.id}}</el-descriptions-item>
    <el-descriptions-item label="反馈者信息">
      <el-tag class="tag-content" size="small">{{description?.supervisor.realName}}</el-tag>
      <el-tag class="tag-content" size="small">{{description?.supervisor.sex == 1?'男':'女'}}</el-tag>
      <el-tag class="tag-content" size="small">{{description?.supervisor.birthday}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="反馈者电话">
      {{description?.supervisor.telNum}}
    </el-descriptions-item>
    <el-descriptions-item label="反馈信息所在地址" :span="2">
      <el-tag class="tag-content" size="small">{{ description?.address.province }}</el-tag>
      <el-tag class="tag-content" size="small">{{ description?.address.city }}</el-tag>
      <el-tag class="tag-content" size="small">{{ description?.address.detailedAddress }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="反馈信息描述">
      {{description?.description}}
    </el-descriptions-item>
    <el-descriptions-item label="预估等级">
      <el-tag class="tag-content" size="small">{{description?.estimatedLevel}}级</el-tag>
      <el-tag class="tag-content" size="small">{{aqiToText(description?.estimatedLevel)}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="反馈日期时间">
      <el-tag class="tag-content" size="small">{{description?.feedbackTime.substring(0, 10)}}</el-tag>
      <el-tag class="tag-content" size="small">{{description?.feedbackTime.substring(11, 19)}}</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <el-form v-if="isAssigned == 0" style="width: 90%; margin-top: 1rem">
    <el-row>
      <el-col :span="3">
        <el-form-item label="是否异地指派">
         <el-switch
             @change="switchChange"
             v-model="isOffAssign"
             inline-prompt
             active-text="是"
             inactive-text="否"
         >
         </el-switch>
        </el-form-item>
      </el-col>
      <el-col :offset="1" :span="4">
        <el-form-item label="省区域" prop="province">
          <el-select :disabled="!isOffAssign" clearable v-model="address.province" placeholder="请选择省" @change="handleProvinceSelect">
            <el-option v-for="item in provinceAndCityData" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :offset="1" :span="4">
        <el-form-item label="市区域" prop="city">
          <el-select clearable v-model="address.city"
                     @change="getInspectorList"
                     placeholder="请选择市"
                     :disabled="!address.province || cityList.length == 0">
            <el-option v-for="item in cityList" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :offset="1" :span="5">
        <el-form-item label="异地指派给">
          <el-select :disabled="assignedPersonList.length == 0"
                     v-model="assignedPerson"
          >
            <el-option v-for="person in assignedPersonList"
                        :key="person.id"
                        :label="person.realName"
                        :value="person.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :offset="1" :span="3">
        <el-form-item>
          <el-button @click="assignInspector">
            确认指派
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  </div>
</template>

<style scoped>
.main-content{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-flow: column;
  width: 100%;
  margin-top: 1.5rem;
}
.tag-content{
  margin-right: 0.5rem
}
</style>
